<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-05-17 15:03:42
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-09-15 16:49:47
 * @FilePath: \operation-platform-ui\src\views\businessSystem\chargingInformation\details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <section class="Block">
    <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
    <a-row class="rows" type="flex" justify="space-between" v-if="orderList.length > 0">
      <a-col class="cols" :span="8">
        <a-card class="cards" title="支付单信息">
          <div
            v-for="(item, index) in orderList"
            :key="index"
            class="single"
            :class="{ actived: item.active }"
            @click="clickItem(item, index)"
          >
            支付单 {{ item.id }}
          </div>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card class="cards detailcard" title="订单明细信息">
          <div
            v-for="(item, index) in orderDetail.chargingOrderAmountDetails"
            :key="index"
            class="single"
            :class="{ actived: item.active }"
          >
            <a-divider>订单明细{{ index + 1 }}</a-divider>
            <div class="one">
              <div>
                <p>商家订单号：{{ item.payId }}</p>
                <p>商家支付单号：{{ item.transactionId }}</p>
                <p>支付类型：{{ chargeType[item.type] }}</p>
                <p>支付方式：{{ orderStatus[item.status] }}</p>
                <p>金额：{{ item.price }}元</p>
                <p>已退金额：{{ item.refundAmount }}元</p>
                <p>退费中金额：{{ item.refunderogressamount }}元</p>
              </div>
              <div class="one_right">
                <InputNumber
                  :labelCol="{ span: 12 }"
                  :wrapperCol="{ span: 12 }"
                  label="退费金额"
                  :form="item"
                  prop="refundFee"
                  :min="0.01"
                  :name="'chargeTmplPriceList.' + index + '.refundFee'"
                  placeholder="请输入退费金额"
                  suffix="元"
                  :precision="2"
                ></InputNumber>
              </div>
            </div>
          </div>

          <div
            class="backbtn"
            v-if="orderDetail.chargingOrderAmountDetails && orderDetail.chargingOrderAmountDetails.length > 0"
          >
            <a-form-model
              ref="pwdForm"
              :model="pwdForm"
              :rules="pwdRules"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
            >
              <Input :form="pwdForm" label="输入退费密码" prop="password" placeholder="请输入退费密码"></Input>
            </a-form-model>
            <a-button type="primary" class="fee_btn" @click="reBack">退费</a-button>
          </div>
          <p v-else>暂无数据</p>
        </a-card>

        <a-card class="cards refundcard" title="退款单列表">
          <div
            v-for="(item, index) in orderDetail.chargingRefunds"
            :key="index"
            class="single"
            :class="{ actived: item.active }"
          >
            <a-divider>退款单明细{{ index + 1 }}</a-divider>
            <div class="one">
              <div>
                <p>创建时间：{{ item.createTime }}</p>
                <p>订单号：{{ item.orderId }}</p>
                <p>支付单号：{{ item.chargingPayId }}</p>
                <p>商户平台退款号：{{ item.refundId }}</p>
                <p>状态：{{ feeStatus[item.refundStatus] }}</p>
                <p>退款金额：{{ item.refundFee }}元</p>
                <p>退款账户：{{ item.userReceivedAccount }}</p>
              </div>
            </div>
          </div>
          <p v-if="orderDetail.chargingRefunds && orderDetail.chargingRefunds.length == 0">暂无数据</p>
        </a-card>
      </a-col>
    </a-row>
    <div class="nodata" v-else>
      <img src="~@/assets/image/empty.png" alt="" />
      <p>暂无数据</p>
    </div>
  </section>
</template>
<script>
import notification from 'ant-design-vue/es/notification';

import InputNumber from '@/components/typicalControl/InputNumber';
import Input from '@/components/typicalControl/Input';

import { listUserChargings, refunds } from '@/api/cabin';
export default {
  components: {
    InputNumber: InputNumber,
    Input: Input,
  },
  props: {
    roleData: {
      type: Object,
      default: {},
    },
    archiveorder: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      orderList: [], //支付单list
      orderDetail: {}, //支付单详情
      form: {},
      rules: {
        packageFee: [{ required: true, message: '请输入套餐费用', trigger: 'blur' }],
      },
      roleLoading: false,
      password: '', //退费密码
      chargeType: {
        CHARGING_FEE: '充电费',
        SERVICE_CHARGE: '服务费',
        OCCUPANCY_FEE: '占仓费',
      },
      // 订单状态
      orderStatus: {
        0: '未付款',
        1: '已发起',
        2: '已付款',
        3: '失败',
        9: '取消',
      },
      pwdForm: {
        password: '',
      },
      pwdRules: {
        password: [{ required: true, message: '请输入退费密码', trigger: 'blur' }],
      },
      feeStatus: {
        PROCESSING: '退款中',
        SUCCESS: '已退款',
        ABNORMAL: '退款异常',
      },
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      let params = {
        orderId: this.roleData.id,
      };
      if (this.archiveorder) {
        params.createTime = decodeURIComponent(this.roleData.createTime);
      }
      listUserChargings('/selectOrderById', 'get', params)
        .then((res) => {
          this.orderList = res;
          if (this.orderList.length > 0) {
            this.orderList.forEach((item, index) => {
              item.active = index == 0 ? true : false;
            });
            this.getOrderDetail(this.orderList[0].id);
          }
        })
        .catch((err) => {});
    },
    getOrderDetail(payid) {
      this.roleLoading = true;
      let param = {
        orderId: this.roleData.id,
        id: payid,
      };
      if (this.archiveorder) {
        param.createTime = decodeURIComponent(this.roleData.createTime);
      }
      listUserChargings('/selectDetailById', 'get', param)
        .then((res) => {
          let datas = res;
          datas.chargingOrderAmountDetails.forEach((item) => {
            item.refundFee = '';
          });
          this.orderDetail = datas;
        })
        .finally((com) => {
          this.roleLoading = false;
        });
    },
    // 点击
    clickItem(item, index) {
      this.orderList.forEach((item) => {
        item.active = false;
      });
      this.orderList[index].active = true;
      this.$forceUpdate();

      this.getOrderDetail(item.id);
    },
    doRebackFee(param) {
      this.roleLoading = true;

      refunds('/wx/charging/order/refund', 'post', param)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.$emit('closeDetailModal');
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.roleLoading = false;
        });
    },
    // 退费
    reBack() {
      let priceList = this.orderDetail.chargingOrderAmountDetails.filter((item) => item.refundFee != '');
      let checkList = this.orderDetail.chargingOrderAmountDetails.filter(
        (item) => Number(item.refundFee) > Number(item.price)
      );
      if (priceList.length == 0) {
        notification.error({
          message: '提示',
          description: '请至少输入一个退费金额！',
        });
      } else if (checkList.length > 0) {
        notification.error({
          message: '提示',
          description: '退费金额不能大于原支付金额！',
        });
      } else if (!this.pwdForm.password) {
        notification.error({
          message: '提示',
          description: '请输入退费密码！',
        });
      } else {
        //发起退费
        let feeDetails = {};
        priceList.forEach((item) => {
          if (item.type == 'CHARGING_FEE') {
            feeDetails.chargePayId = item.chargingPayId;
            feeDetails.chargingRefundFee = item.refundFee;
          }
          if (item.type == 'SERVICE_CHARGE') {
            feeDetails.chargePayId = item.chargingPayId;
            feeDetails.serviceRefundFee = item.refundFee;
          }
          if (item.type == 'OCCUPANCY_FEE') {
            // feeDetails.occupyPayId = item.chargingPayId;
            feeDetails.chargePayId = item.chargingPayId;
            feeDetails.occupyRefundFee = item.refundFee;
          }
        });
        feeDetails.password = this.pwdForm.password;
        if (this.archiveorder) {
          feeDetails.createTime = this.roleData.createTime;
        }

        this.$confirm({
          title: '提示',
          content: (h) => '确定要退费吗？',
          onOk: () => this.doRebackFee(feeDetails),
          centered: true,
          maskClosable: true,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.Block,
.rows,
.cols,
.cards {
  max-height: 100%;
  // overflow: hidden;
}
.cards {
  height: 600px;
  overflow-y: auto;
}
.detailcard {
  height: 300px;
}
.refundcard {
  height: 300px;
}
.single {
  line-height: 40px;
  padding: 0 10px;
  cursor: pointer;
  p {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    margin: 0;
  }
  .one {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.actived {
  background: #1890ff;
  color: #ffffff;
}
/deep/ .ant-form-item {
  display: flex;
}
.backbtn {
  display: flex;
  justify-content: flex-end;
  .fee_btn {
    margin: 5px 0 40px 10px;
  }
}
.Block {
  position: relative;
  width: 100%;
  height: 100%;
}
.Block .position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: white;
}
.nodata {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>